<template>
  <div class="header w1420 flexRow Xbetween Ycenter">
    <div class="left flexRow">
      <img class="logo" :src="logo" alt />
      <el-menu
        :default-active="activePath"
        text-color="#262626"
        active-text-color="#3385FF"
        mode="horizontal"
        @select="handleSelect"
        :router="router"
      >
        <el-menu-item index="/">首页</el-menu-item>
        <el-menu-item index="/introduce">赛事介绍</el-menu-item>
        <el-submenu index="/review">
          <template slot="title">往届回顾</template>
          <el-menu-item
            v-for="(item, index) in previousList"
            :key="index"
            :index="`/review?id=${item.id}`"
            >{{ item.name }}</el-menu-item
          >
        </el-submenu>
        <el-menu-item index="/current">本届作品</el-menu-item>
        <el-menu-item index="/about">关于我们</el-menu-item>
      </el-menu>
    </div>
    <div class="right flexRow Ycenter">
      <el-dropdown @command="handleSetLanguage">
        <span class="el-dropdown-link">
          {{ languageObj.name
          }}<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item
            v-for="(item, index) in languageList"
            :key="index"
            v-show="languageObj.value != item.value"
            :command="item.value"
          >
            {{ item.name }}
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <el-popover
        v-model="popShow"
        popper-class="login-pop"
        placement="bottom-end"
        width="320"
        :visible-arrow="false"
        trigger="hover"
      >
        <div class="login-content">
          <div class="top flexRow Ycenter">
            <div class="avatar">
              <img
                :src="userInfo.head_img || require('../assets/img/avatar.png')"
                alt
              />
            </div>
            <div class="text flexCol Xbetween">
              <div>{{ userInfo.nickname || '您还未登录' }}</div>
              <div>{{ userInfo.memo || '登录后即可体验更多功能' }}</div>
            </div>
          </div>
          <template v-if="userInfo.nickname">
            <div class="bottom">
              <div class="flexRow Xbetween">
                <div class="item pointer" @click="goto('mine')">
                  <img src="../assets/img/mine-icon.png" alt />
                  <div>个人中心</div>
                </div>
                <div class="item pointer" @click="goto('mine')">
                  <img src="../assets/img/activity-icon.png" alt />
                  <div>我参赛的</div>
                </div>
                <div class="item pointer" @click="goto('apply')">
                  <img src="../assets/img/doc-icon.png" alt />
                  <div>我要参赛</div>
                </div>
              </div>
              <span class="btn loginout pointer" @click="loginout"
                >安全登出</span
              >
            </div>
          </template>
          <template v-else>
            <div class="bottom">
              <span class="btn pointer" @click="dialogFormVisible = true"
                >立即登录</span
              >
            </div>
          </template>
        </div>
        <div v-if="userInfo.nickname" class="headimg" slot="reference">
          <img
            :src="userInfo.head_img || require('../assets/img/avatar.png')"
            alt
          />
        </div>
        <div v-else class="login-btn" slot="reference">登录/注册</div>
      </el-popover>
    </div>
    <el-dialog
      width="1000px"
      :visible.sync="dialogFormVisible"
      @closed="dialogClosed"
    >
      <div class="login-modal flexRow Ycenter">
        <img src="../assets/img/modal-bg.png" alt />
        <div class="form">
          <template v-if="modalType == 'login'">
            <div class="title">密码登录</div>
            <el-form ref="login" :model="formObj" :rules="rules">
              <el-form-item prop="phone">
                <el-input placeholder="请输入手机号码" v-model="formObj.phone">
                  <template slot="prepend">+86</template>
                </el-input>
              </el-form-item>
              <el-form-item prop="password">
                <el-input
                  type="password"
                  placeholder="请输入你的登录密码"
                  v-model="formObj.password"
                ></el-input>
              </el-form-item>
              <el-form-item prop="verify">
                <div class="flexRow Xbetween">
                  <el-input
                    placeholder="请输入验证码"
                    v-model="formObj.verify"
                  ></el-input>
                  <img
                    class="code pointer"
                    :src="imgCodeSrc"
                    alt
                    @click="getImgCode"
                  />
                </div>
              </el-form-item>
              <!-- <el-form-item>
                <el-checkbox>12小时内自动登录</el-checkbox>
              </el-form-item> -->
              <el-form-item>
                <el-button @click="submit">登录</el-button>
              </el-form-item>
            </el-form>
            <div class="flexRow Xend">
              <!-- <el-link
                type="info"
                :underline="false"
                @click="modalType = 'forget'"
                >忘记密码？</el-link
              > -->
              <el-link
                type="info"
                :underline="false"
                @click="modalType = 'register'"
                >免费注册</el-link
              >
            </div>
          </template>
          <template v-else-if="modalType == 'register'">
            <div class="title">欢迎注册未来发明家</div>
            <el-form ref="register" :model="formObj" :rules="rules">
              <el-form-item prop="name">
                <el-input
                  placeholder="设置会员名"
                  v-model="formObj.name"
                ></el-input>
              </el-form-item>
              <el-form-item prop="password">
                <el-input
                  type="password"
                  placeholder="设置你的登录密码"
                  v-model="formObj.password"
                ></el-input>
              </el-form-item>
              <el-form-item prop="checkPassword">
                <el-input
                  type="password"
                  placeholder="请再次输入你的密码"
                  v-model="formObj.checkPassword"
                ></el-input>
              </el-form-item>
              <el-form-item prop="phone">
                <el-input placeholder="请输入手机号码" v-model="formObj.phone">
                  <template slot="prepend">+86</template>
                </el-input>
              </el-form-item>
              <el-form-item prop="verify">
                <div class="flexRow Xbetween">
                  <el-input
                    placeholder="请输入验证码"
                    v-model="formObj.verify"
                  ></el-input>
                  <img
                    class="code pointer"
                    :src="imgCodeSrc"
                    alt
                    @click="getImgCode"
                  />
                </div>
              </el-form-item>
              <el-form-item prop="registerCheck">
                <el-checkbox v-model="formObj.registerCheck"></el-checkbox>
                <el-link
                  type="primary"
                  :underline="false"
                  @click="modalType = 'serviceAgreement'"
                  >《未来发明家网站服务条款》
                </el-link>
                <el-divider direction="vertical"></el-divider>
                <el-link
                  type="primary"
                  :underline="false"
                  @click="modalType = 'registerAgreement'"
                  >《未来发明家注册协议》
                </el-link>
              </el-form-item>
              <el-form-item>
                <el-button @click="submit">登录</el-button>
              </el-form-item>
            </el-form>
            <div style="text-align: center">
              <span>已有未来发明家账号？</span>
              <el-link
                type="primary"
                :underline="false"
                @click="modalType = 'login'"
                >快捷登录 ></el-link
              >
            </div>
          </template>
          <template v-else-if="modalType == 'forget'">
            <div class="title">忘记密码</div>
            <el-form>
              <el-form-item>
                <el-input placeholder="请输入手机号码">
                  <template slot="prepend">+86</template>
                </el-input>
              </el-form-item>
              <el-form-item>
                <div class="flexRow Xbetween">
                  <el-input placeholder="请输入验证码"></el-input>
                  <img
                    class="code pointer"
                    :src="imgCodeSrc"
                    alt
                    @click="getImgCode"
                  />
                </div>
              </el-form-item>
              <el-form-item>
                <el-input placeholder="设置你的登录密码"></el-input>
              </el-form-item>
              <el-form-item>
                <el-input placeholder="请再次输入你的密码"></el-input>
              </el-form-item>
              <el-form-item style="text-align: center">
                <el-button>重置密码</el-button>
                <el-link
                  type="info"
                  :underline="false"
                  @click="modalType = 'login'"
                  >去登录</el-link
                >
              </el-form-item>
            </el-form>
          </template>
          <template v-else-if="modalType == 'serviceAgreement'">
            <div v-html="serviceAgreementStr"></div>
          </template>
          <template v-else-if="modalType == 'registerAgreement'">
            <div v-html="registerAgreementStr"></div>
          </template>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { setCookie } from '../utils/auth'
import { serviceAgreement, registerAgreement } from '../api/home'
import { previousSelcet } from '../api/review'
export default {
  name: 'Header',
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.formObj.checkPassword !== '') {
          this.$refs[this.modalType].validateField('checkPassword')
        }
        callback()
      }
    }
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.formObj.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    var validateCheck = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请勾选协议'))
      } else {
        callback()
      }
    }
    return {
      popShow: false,
      router: true,
      defaultActive: '',
      previousList: [], // 往届列表
      languageName: '',
      languageList: [
        { name: '简体中文', value: 'zh-cn' },
        { name: '繁体中文', value: 'zh-tw' },
        { name: 'English', value: 'en-us' }
      ],
      imgCodeSrc: '',
      modalType: 'login',
      serviceAgreementStr: '',
      registerAgreementStr: '',
      formObj: {
        phone: '',
        name: '',
        password: '',
        checkPassword: '',
        verify: '',
        key: '',
        registerCheck: false
      },
      rules: {
        name: [{ required: true, message: '请输入会员名', trigger: 'blur' }],
        password: [{ validator: validatePass, trigger: 'blur' }],
        checkPassword: [{ validator: validatePass2, trigger: 'blur' }],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { min: 11, max: 11, message: '请输入11位手机号码', trigger: 'blur' },
          {
            pattern: /^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/,
            message: '请输入正确的手机号码',
            trigger: 'blur'
          }
        ],
        verify: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
        registerCheck: [{ validator: validateCheck, trigger: 'change' }]
      }
    }
  },
  computed: {
    token: {
      get() {
        return this.$store.getters.token
      }
    },
    userInfo: {
      get() {
        return this.$store.getters.userInfo
      }
    },
    logo: {
      get() {
        return this.$store.getters.logo
      }
    },
    languageObj: {
      get() {
        let value = this.$store.state.settings.language
        let obj = {
          name: this.languageRep(value),
          value
        }
        return obj
      },
      set(val) {
        this.$store.dispatch('settings/changeSetting', {
          key: 'language',
          value: val.value
        })
        setCookie('language', val.value)
      }
    },
    dialogFormVisible: {
      get() {
        return this.$store.state.settings.loginDialogFormVisible
      },
      set(val) {
        this.$store.dispatch('settings/changeSetting', {
          key: 'loginDialogFormVisible',
          value: val
        })
      }
    },
    activePath: {
      get() {
        return this.$store.state.settings.activePath
      },
      set(val) {
        this.$store.dispatch('settings/changeSetting', {
          key: 'activePath',
          value: val
        })
        setCookie('path', val)
      }
    }
  },
  mounted() {
    this.getServiceAgreement()
    this.getRegisterAgreement()
    this.getPreviousList()
    this.getImgCode()
    if (this.token) {
      this.getUserInfo()
    }
  },
  methods: {
    // 获取服务协议
    getServiceAgreement() {
      serviceAgreement().then((res) => {
        this.serviceAgreementStr = res.data
      })
    },
    // 获取注册协议
    getRegisterAgreement() {
      registerAgreement().then((res) => {
        this.registerAgreementStr = res.data
      })
    },
    handleSelect(key) {
      this.activePath = key
    },
    // 获取往届列表
    getPreviousList() {
      previousSelcet().then((res) => {
        this.previousList = res.data.data
        if (this.previousList.length > 0) {
          this.$store.dispatch('user/setReviewId', this.previousList[0].id)
        }
      })
    },
    languageRep(value) {
      let name = ''
      this.languageList.forEach((item) => {
        if (item.value == value) {
          name = item.name
        }
      })
      return name
    },
    // 语言设置
    handleSetLanguage(lang) {
      this.$i18n.locale = lang
      this.languageObj = {
        name: this.languageRep(lang),
        value: lang
      }
      this.$router.go(0)
    },
    // 获取用户信息
    getUserInfo() {
      this.$store.dispatch('user/getInfo')
    },
    // 关闭弹窗
    dialogClosed() {
      if (this.$refs[this.modalType]) {
        this.$refs[this.modalType].resetFields()
      }
      this.modalType = 'login'
    },
    // 获取图形验证码
    getImgCode() {
      this.formObj.key = new Date().getTime()
      this.imgCodeSrc =
        'http://competition.sayyin.com/api/register/entry?key=' +
        this.formObj.key
    },
    // 提交
    submit() {
      this.$refs[this.modalType].validate((valid) => {
        if (valid) {
          this.$store
            .dispatch('user/' + this.modalType, this.formObj)
            .then(() => {
              if (this.modalType == 'login') {
                this.dialogFormVisible = false
                this.getUserInfo()
              } else if (this.modalType == 'register') {
                this.dialogClosed()
              }
            })
        }
      })
    },
    // 登出
    loginout() {
      this.$store.dispatch('user/logout')
    },
    goto(path) {
      this.popShow = false
      this.activePath = '/' + path
      this.$router.push({ path: '/' + path })
    }
  }
}
</script>

<style lang="scss" scoped>
.header {
  height: 100%;
  /*样式重置 */
  /deep/ {
    .el-menu.el-menu--horizontal {
      border-bottom: none;
      li {
        font-size: 18px;
      }
    }
    .el-submenu__title {
      font-size: 18px;
    }
    .el-menu--horizontal > .el-menu-item.is-active,
    .el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
      border-bottom: none;
      border-bottom-color: transparent !important;
    }

    .el-dialog {
      border-radius: 10px;
    }
    .el-dialog__header {
      padding: 0;
    }
    .el-dialog__body {
      padding: 0;
    }
    .el-dialog__headerbtn {
      font-size: 22px;
      top: -32px;
      right: 0;
      .el-dialog__close {
        color: #ffffff;
      }
    }
  }

  .logo {
    width: 214px;
    height: 62px;
    margin-right: 88px;
  }
  .right {
    height: 100%;
    .headimg {
      margin-left: 130px;
      img {
        width: 60px;
        height: 60px;
        border-radius: 50%;
      }
    }
    .login-btn {
      width: 160px;
      height: 100px;
      background: #3385ff;
      line-height: 100px;
      text-align: center;
      font-size: 18px;
      color: #ffffff;
      margin-left: 30px;
    }
  }
}
.login-content {
  .top {
    width: 100%;
    height: 110px;
    background: url('../assets/img/unlogin-bg.png') no-repeat center center;
    background-size: 100% 100%;
    padding-left: 30px;
    box-sizing: border-box;
    .avatar {
      background: #ffffff;
      padding: 4px;
      border-radius: 50%;
      margin-right: 17px;
      img {
        width: 44px;
        height: 44px;
      }
    }
    .text {
      height: 40px;
      font-size: 16px;
      color: #262626;
      div:last-child {
        font-size: 12px;
        color: #999999;
      }
    }
  }
  .bottom {
    padding: 30px;
    text-align: center;
    .item {
      font-size: 14px;
      color: #666666;
      img {
        width: 22px;
        height: 22px;
        margin-bottom: 21px;
      }
    }
    .btn {
      display: inline-block;
      width: 260px;
      height: 44px;
      line-height: 44px;
      background: linear-gradient(90deg, #3174ff 0%, #12abff 100%);
      box-shadow: 0px 6px 10px 0px rgba(51, 133, 255, 0.3);
      border-radius: 4px;
      font-size: 18px;
      color: #ffffff;
      &.loginout {
        background: #eff1f4;
        color: #666666;
        margin-top: 40px;
        box-shadow: none;
      }
    }
  }
}

.login-modal {
  height: 580px;
  & > img {
    width: 480px;
    height: 100%;
  }
  .form {
    width: 520px;
    padding: 0 60px;
    box-sizing: border-box;
    .title {
      font-size: 30px;
      color: #262626;
      margin-bottom: 40px;
      text-align: center;
    }
    .code {
      width: 92px;
      height: 40px;
      margin-left: 7px;
    }
    .el-button {
      width: 100%;
      background: linear-gradient(90deg, #3174ff 0%, #12abff 100%);
      font-size: 18px;
      color: #ffffff;
    }
  }
}
</style>
<style lang="scss">
.login-pop.el-popper[x-placement^='bottom'] {
  margin-top: 0;
  padding: 0;
  border-radius: 0;
}
</style>